<template>
	<view class="content">
		<!-- <router-view :name="routerName"></router-view> -->
		<!-- <view class="nav_box"> -->
			<!-- <navBar ></navBar> -->
			<!-- <van-tabbar :active=activeNav @change="onChangeNav">
				<van-tabbar-item @click="changeNav(1)">
					<template v-if="activeNav!==0">
						<template slot="icon">
						<view class="backIcon">
							<img src="../../static/find.png" style="width: 18px; height: 18px;" />
						</view>
					</template>
					发现
					</template>

					<template slot="icon-active">
						<view class="backIcon">
							<img src="../../static/find_act.png" style="width: 30px; height: 30px;" />
						</view>
					</template>
				</van-tabbar-item>
				<van-tabbar-item dot @click="changeNav(2)">
					<template slot="icon">
						<view class="backIcon">
							<img src="../../static/shequ_icon.png" style="width: 18px; height: 18px;" />
						</view>
					</template>
					<template slot="icon-active">
						<view class="backIcon">
							<img src="../../static/shequ_act.png" style="width: 18px; height: 18px;" />
						</view>
					</template>
					社区</van-tabbar-item>
				<van-tabbar-item info="5" @click="changeNav(3)">
					<template slot="icon">
						<view class="backIcon">
							<img src="../../static/surprise_icon.png" style="width: 18px; height: 18px;" />
						</view>					
					</template>
						<template slot="icon-active">
						<view class="backIcon">
							<img src="../../static/surprise_act.png" style="width: 18px; height: 18px;" />
						</view>

					</template>
					惊喜</van-tabbar-item>
				<van-tabbar-item info="20" @click="changeNav(4)">
					<template slot="icon">
						<view class="backIcon">
							<img src="../../static/my_icon.png" style="width: 18px; height: 18px;" />
						</view>
					</template>
					<template slot="icon-active">
						<view class="backIcon">
							<img src="../../static/my_act.png" style="width: 18px; height: 18px;" />
						</view>
					</template>
					我的
				</van-tabbar-item>
			</van-tabbar> -->
		<!-- </view> -->
	</view>
</template>

<script>
import { navBar } from '@/mycomponents/navBar'

export default {
	components: {
		navBar
	},
	data() {
		return {
			title: 'Hello111',
			indicatorDots: true,
			curIndex: 1,
			routerName: '',
			pinTuans: [],
			value1: 0,
			value2: 'a',
			activeTab:1,
			activeNav: 0,
			activeIndex: 0,
			currentIndex:0,   //手写的tab
			sortList: [
				{
					sortName: '家政服务',
					key:1,
				},
				{
					sortName: '洗衣洗鞋',
					key:2,
				},
				
				{
					sortName: '租房售房',
					key:3,
				},
				{
					sortName: '上门维修',
					key:4,
				},
				{
					sortName: '闲置交易',
					key:5,
				},
			],

			contentData: [{
				imgurl: require('../../static/find/panda.png'),
				title: "立达小熊猫 | 悬挂式抽纸1300抽",
				tips: ['今日开抢', '每人一份', '好评如潮'],
				progress: '20'
			},
			{
				imgurl: require('../../static/find/wudeli.png'),
				title: "五得利面粉10斤八星雪花麦芯小麦粉5kg",
				tips: ['今日开抢', '数量不限', '好评如潮','卖爆五万'],
				progress: '50'
			},
			{
				imgurl: require('../../static/find/maojin.png'),
				title: "三利抗菌加厚毛巾2条A类吸水男女洗脸洗澡家用干发大面巾 棕/灰",
				tips: ['数量不限'],
				progress: '50'
			}
			],
			tabData: [
				{
					typeId: 0,
					typeName: '同城活动'
				},
				{
					typeId: 1,
					typeName: '周边商家'
				},
				{
					typeId: 2,
					typeName: '老年大学'
				},
				{
					typeId: 3,
					typeName: '养花养草'
				},
				{
					typeId: 4,
					typeName: '赚积分'
				}],
			actContent: [{
				imgurl: require('../../static/actImg1.png'),
				title: "社区活动 | 零基础瑜伽体验活动",
				date: '10月13日 周六 14:00-16:00',
				address: "水岸华庭·东郡 | 篮球场"
			},
			{
				imgurl: require("../../static/actImg2.png"),
				title: "公益活动|心肺复苏 CPR+AED 培训活动",
				date: '10月20日 19:00-21:00',
				address: "盐湖区 | 金鑫大酒店"
			}],
			navHeight: uni.getStorageSync('navHeight'), // 顶部导航栏的高度
			bgOpacity:""
		}
	},
	onLoad() {

	},
	methods: {
		login() {
			uni.navigateTo({
				url: '/pages/home/index'
			})
		},
		changeNav(index) {
			switch (index) {
				case 1:
					// this.routerName = ''
					uni.navigateTo({
						url: '/pages/find/index'
					})
					break;
				case 2:
				uni.navigateTo({
						url: '/pages/community/index'
					})
					break;
				case 3:
				uni.navigateTo({
						url: '/pages/surprise/index'
					})
					break;
				case 4:
				uni.navigateTo({
						url: '/pages/my/index'
					})
					break;
			}
                      
		},
		clearStorage() {
			uni.showToast({
				title: '清除成功',
				icon: 'success',
				duration: 2000, // 提示的延迟时间，单位毫秒，默认：1500
				mask: false, // 是否显示透明蒙层，防止触摸穿透，默认：false
				// image:'./image.png',//自定义图标的本地路径
			})
		},
		changeTab(e) {
			console.log(e.detail.title, '090909')
		},

		// 手动写tabs
		changeTabs(index,e) {
			this.currentIndex = index
			console.log(e.detail.title, '090909')
		},
		onChangeNav() {
			console.log("11111")
		},
		onTabClick(val,e) {
			this.activeIndex = val
			console.log(val,'发现页服务')
		},
		// 去抢购
		goBuy(){},
		scrollPage (e) {
            this.bgOpacity = `opacity:${1 - e.detail.scrollTop / this.navHeight}`
        },


	}
}
</script>

<style lang="scss" scoped>
::v-deep .swiper-dots .swiper-dot{
	background-color: red;
}
::v-deep .van-dropdown-menu {
	background: transparent;
	box-shadow: none;
}




.content {
	position: relative;
	box-sizing: border-box;
	height: calc(100vh - 63px);
	// padding-bottom: 63px;
	overflow-y: auto;
	// overflow: hidden;
	// justify-content: center;
	// font-family: Microsoft YaHei;
	// background: #F3F8FC;
	z-index: 1;
	
	background-color: #F7F8FA;
	background-size: 100%;
	display: flex;
	flex-direction: column;
}
.top_swiper {
	position: absolute;
    display: block;
    height: 240px;
	width: 100%;
	z-index: -1;
	img{
		width: 100%;
		height: 240px;
	}
}
	
.top {
	// position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	margin-top: 60px;
	// background: linear-gradient(90deg, #A0CFF9 0%, #D7EAFC 100%);
	font-weight: 700;

	.right {
		margin-right: 60px;
	}
}

.main {
	// margin-top: 171px;
	margin-top: 280px;
	margin-bottom: 30px;
}


.service_wrap_box {
	margin: 0px 11px;
	// margin-left: 11px;
	// margin-right: 11px;
	border-radius: 12px;
	background: #ffffff;
	box-sizing: border-box;
}

.tabs_box{
   height: 54px;
   line-height: 54px;
//    background: #fcf4e1;
}

.top-tabs {
	display: flex;
	// overflow: hidden;
	border-radius: 6px 6px 0 0;
	height: 54px;
	border:1px #e1e3ea;
	background: #fcf4e1;
	

	.box {
		// flex: 1;
		width: 20%;
		height: 54px;
		line-height: 54px;
		font-weight: 400;
		font-size: 12px;
		text-align: center;
		color: #111111;
	}
}

.top-tab-item {

	height: 54px;
	margin: 0 auto;
	cursor: pointer;
	position: relative;
	text-align: center;
	line-height: 54px;
}

.top-tab-item.active {
	background-color: transparent;
	font-weight: 900;
	font-size: 13px;
	text-align: center;
	color: #333333;
	// height: 44px;
}

.actR{
    background: url("../../static/find/actR_img.png") no-repeat;
    background-size: 100%;
	height: 54px;
	width: 79px;
}
.actL{
	background: url("../../static/find/actL_img.png") no-repeat;
	background-size: 100%;
	height: 54px;
	width:90px;
	background-color: transparent;
	font-weight: 900;
	font-size: 13px;
	text-align: center;
	color: #333333;
}
.actM{
	background: url("../../static/find/actM_img.png") no-repeat;
  	background-size: 100%;
	height: 54px;
	width: 79px;
}
.tabAct{
	height: 44px;
	line-height: 44px;
	margin-top: 3px;
	border-radius: 6px 6px 0 0;
	background: transparent;
}
.tabNoAct{
	height: 44px;
	line-height: 44px;
	margin-top: 3px;
	// border-radius: 6px 6px 0 0;
	background: #fcf4e1;
}
// .tab.active:before {
//   content: '';
//   position: absolute;
//   top: 0;
//   left: -13px;
//   height: 100%;
//   width: 13px;
//   z-index: 2;
//   background-color: #fff;
//   clip-path: path('M 50,0 C 25,0 25,50 0,50 L 50,50 Z');
// }

// .tab.active:after {
//   content: '';
//   position: absolute;
//   top: 0;
//   right: -13px;
//   height: 100%;
//   width: 13px;
//   z-index: 2;
//   background-color: #fff;
//   clip-path: path('M 0,0 C 25,0 25,50 50,50 L 0, 50 Z');
// }



// 服务部分的内容  图标+文字
.serviceContent-wrap {
	padding-top:19px ;  //距离点击后的 盒子上16px
	// padding: 0 10px; //内容左右10px
	padding-bottom: 25px;
	border-radius: 12px;
	background: #ffffff;
	display: flex;
	justify-content: space-between;

	.serviceContent {
		text-align: center;
		flex: 1;

		.service_icon {
			width: 34px;
			height: 34px;
		}

		img {
			width: 34px;
			height: 34px;
		}

		.service_name {
			font-weight: 500;
			height: 11px;
			font-size: 11px;
			text-align: center;
			color: #333333;
			line-height: 11px;
			margin-top: 10px;
		}
	}
}

.wrap-empty{
	min-height: 60px;
	line-height: 60px;
	font-size: 11px;
	text-align: center;
	color: #333333;
}
// 社区活动
.pinTuan {
	border-radius: 11px 11px 11px 11px;
	background: #ffffff;
	margin: 9px 11px;
	// 内容部分最后有个bottom10px 这里减掉   后期改
	padding: 15px 10px 4px 10px;

	.pinTuan_title {
		// vertical-align: middle;
		// background: palevioletred;
		height: 20px;
		line-height: 20px;
	}

	.act_title {
		float: left;
		font-weight: 900;
		height: 15px;
		font-size: 15px;
		text-align: left;
		color: #111111;
	}

	.act_more {
		float: right;
		line-height: 10px;
		vertical-align: middle;
		font-weight: 400;
		height: 10;
		font-size: 10px;
		text-align: right;
		color: #666666;


		.act_t {
			color: #666666;
			font-weight: 400;
			font-size: 10px;
		}

		.act_Im {
			vertical-align: -1px;
		}
	}

	.pinTuan_content {
		margin-top: 15px;
	}
	.bottom_left{
		width: calc(100% - 51px);
	}

	.goBuy_icon {
		margin-top: 14px;
		height: 19px;
		width: 35px;
		line-height: 19px;
		border-radius: 2px 2px 2px 2px;
		background: url("../../static/find/goBuy.png") no-repeat;
		background-size: 100%;
		font-weight: 700;
		font-size: 8px;
		text-align: center;
		color: #FFFFFF;
		// position: absolute;
	}
}

// 社区商家活动部分 盒子样式
.box_content {

	.content_img {
		margin-right: 10px;
		width: 56px;
		height: 56px;
	}

	.content_text {
		width: 100%;

		.content_text_title {
			color: #222222;
			font-weight: 700;
			font-size: 14px;
			text-align: left;
			line-height: 14px;
			// margin-top: 2px;
		}

		.content_text_tips {
			height: 14px;
			line-height: 10px;
			margin-top: 8px;
			margin-bottom: 6px;
		}
		.tips_span {
			box-sizing: border-box;
			margin-right: 5px;
			padding: 0px 6px;
			border-radius: 14px;
			background: #cecece;
			font-weight: 400;
			font-size: 10px;
			text-align: center;
			color: #FFFFFF;
		}

		.content_text_date {
			font-weight: 400;
			height: 10px;
			font-size: 10px;
			text-align: left;
			color: #111111;
			line-height: 10px;
			margin-top: 9px;
		}

		.content_sj_date {
			height: 10px;
			line-height: 10px;
			margin-top: 9px;
			text-align: left;
			color: #888888;
		}

		.content_text_address {
			font-weight: 400;
			height: 10px;
			font-size: 10px;
			text-align: left;
			color: #888888;
			// letter-spacing: 2.4px;
			line-height: 10px;
		}

		.content_sj_address {
			height: 12px;
			line-height: 12px;
			font-size: 10px;
			text-align: left;
			display: flex;
			color: #888888;
		}
		.content_text_bottom{
			width: 100%;
			display: flex;
			justify-content: space-between;

		}
		.content_text_progress{
			position: relative;

			.progress_span{
				position: absolute;
				font-weight: 400;
				font-size: 5px;
				line-height: 5px;
				text-align: left;
				color: #ffffff;
				top: 2px;
				left: 6px;
			}
			::v-deep .van-progress__portion::before {
				content: ' ';
				width: 8px;
				height: 8px;
				position: absolute;
				top: 1px;
				right: 0;
				background: url('../../static/find/progress_logo.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				z-index: 99;
			}			
		}

	}
}


// 多次用到display
.act_display {
	display: flex;
}


::v-deep .van-progress {
	width: calc(100% - 22px);
}

.activity {
	margin: 0px 11px 10px 11px;
	.tabs_content {
		border-radius: 12px 12px 12px 12px;
		background: #ffffff;
		padding: 12px 9px 10px 9px;
	}
}

// tabs
// ::v-deep.van-tab {
// 	background: pink;
// }

// ::v-deep .van-tab__pane .van-tab__pane--active {
// 	border-radius: 12px 12px 12px 12px;
// 	background: #ffffff;
// }

// ::v-deep .van-tabs__line {
// 	display: none;
// }

// ::v-deep .van-tab--active {
// 	// font-weight: 900;
// 	// height: 14px;
// 	// font-size: 14px;
// 	// text-align: left;
// 	// color: #333333;
// }



// 手写页面最下tab
.act_tabs{
	margin-top: 14px;
	margin-bottom: 14px;
    height: 14px;
	line-height: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.white{
  .tabbar-item {
    flex: auto;
    z-index: 1;
    text-align: center;
    font-size: 12px;
    font-weight:bold;
    color: #666666;

    &.active {
        font-style: normal;
        font-weight: 900;
		font-size: 14px;
		color: #333333;
    }
  }
}
// logo
.logo_img {
	text-align: center;
}



.r5 {
	margin-right: 5px;
}

.r10 {
	margin-right: 10px;
}

.t1 {
	margin-left: 1px;
}

.t2 {
	margin-top: 2px;
}

.t5 {
	margin-top: 5px;
}
.t7{
	margin-top: 7px;
}
.t9 {
	margin-top: 9px;
}

.t10 {
	margin-top: 10px;
}
.t12{
	margin-top: 12px;
}

.b1 {
	margin-right: 1px;
}

.b9 {
	margin-bottom: 9px;
}

.b11 {
	margin-bottom: 11px;
}

.b12 {
	margin-bottom: 12px;
}

.b13 {
	margin-bottom: 13px;
}


::v-deep .van-progress__pivot {
    display: none;
}

// 底部导航
::v-deep .van-tabbar-item{
	font-weight: 400;
	font-size: 10px;
	color: #666666;
}
::v-deep .van-tabbar-item--active{
    font-weight: bolder;
	font-size: 10px;
	color: #666666;
}
</style>
